/* 个人中心首页 */
/* 用户信息 */
.user-home {
  .my-info {
    padding: 30px;
    border: 1px solid #eee;
    display: flex;

    .info-box {
      padding-right: 30px;
      border-right: 1px solid #eee;
      display: flex;
      align-items: center;

      .portrait-box {
        position: relative;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 0 5px rgba(0, 0, 0, .05);
        overflow: hidden;
        background: #fff;

        .portrait {
          width: 100%;
          height: 100%;
          line-height: 75px;
          text-align: center;
          font-size: 0;

          img {
            max-width: 100%;
            vertical-align: middle;
          }
        }

        .edit {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          color: #fff;
          text-align: center;
          line-height: 75px;
          display: none;
        }

        &:hover {
          .edit {
            display: block;
          }
        }
      }

      .name-box {
        margin-left: 20px;

        .name {
          margin-bottom: 12px;
          display: flex;
          width: 150px;
          font-weight: 600;

          .text {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 115px;
            font-size: 16px;
          }

          .vip {
            margin-left: 5px;
            width: 28px;

            img {
              width: 28px;
              height: 14px;
              vertical-align: middle;
            }
          }
        }

        .level-box {
          display: flex;
          align-items: center;
          margin-top: 5px;
          line-height: 16px;

          .text {
            color: #999;
          }
        }

        .level {
          flex: 1;
          line-height: 16px;
          padding-left: 19px;
          position: relative;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;

          &::before {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 14px;
            height: 14px;
            content: " ";
            background: url(@/assets/images/icons.png) no-repeat;
          }
        }

        .level.v1 {
          &::before {
            background-position: 0 -614px;
          }
        }

        .level.v2 {
          &::before {
            background-position: -19px -614px;
          }
        }

        .level.v3 {
          &::before {
            background-position: -38px -614px;
          }
        }

        .number {
          font-family: arial;
        }
      }
    }

    .order-tab {
      flex: 1;
      display: flex;
      margin-left: 30px;
      text-align: center;

      .item {
        flex: 1;
        cursor: pointer;

        .img {
          width: 50px;
          height: 50px;
          margin: auto;
          background: url(@/assets/images/icons.png) no-repeat;
        }

        .img.unpaid {
          background-position: 0 -559px;
        }

        .img.no-shipped {
          background-position: -55px -559px;
        }

        .img.shipped {
          background-position: -110px -559px;
        }

        .img.no-reviewed {
          background-position: -165px -559px;
        }

        .text {
          margin-top: 5px;
          height: 20px;
          line-height: 20px;
          -moz-transition: all 0.2s;
          -webkit-transition: all 0.2s;
          -o-transition: all 0.2s;
          transition: all 0.2s;

          .number {
            font-weight: 700;
            font-family: verdana;
            margin-left: 5px;
            color: #e1251b;
          }
        }

        &:hover {
          .text {
            color: #e1251b;
          }
        }
      }
    }
  }
}

/* 用户信息 end */
.user-home {
  .buy-member {
    height: 120px;
    background: url(@/assets/images/uc-adv.jpg) no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;

    .text {
      margin-left: 320px;
      color: #fff;

      .big {
        font-size: 24px;
        width: 460px;
        overflow-wrap: break-word;
        word-wrap: break-word;
      }

      .small {
        margin-top: 10px;
        font-family: arial;
      }
    }

    .btn {
      margin-left: 28px;
      width: 120px;
      height: 36px;
      line-height: 36px;
      background-size: 100% 100%;
      font-size: 14px;
      color: #150f0b;
      text-align: center;
      letter-spacing: 1px;
      font-weight: 600;
    }
  }

  .en {
    .btn {
      margin-left: 0;
    }
  }

  .buy-member.en {
    .btn {
      margin-right: 143px;
    }
  }

  .order-head {
    padding: 10px 15px;
    background: #f9f9f9;
    border: 1px solid #eee;
    display: flex;
    margin-top: 20px;

    .text {
      flex: 1;
      font-weight: 600;
    }

    .all {
      color: #999;

      &:hover {
        color: #e1251b;
      }
    }
  }

  .order-list {
    .order-table {
      border: 1px solid #eee;
      border-top: 0;

      .box {
        border: 0;

        td {
          border: 0;
          padding: 10px 0;
          border-top: 1px dotted #ddd;
        }

        tr {
          &:first-child {
            td {
              border-top: 0;
            }
          }
        }
      }
    }
  }

  .guess-like {
    .guess-like-tit {
      height: 37px;
      line-height: 37px;
      padding: 0 5px 0 15px;
      background: #f9f9f9;
      border: 1px solid #eee;

      .text {
        font-size: 12px;
      }

      .swiper-controls {
        margin-right: 0;
      }
    }

    .list-con {
      padding: 21px;
      border: 1px solid #eee;
      border-top: 0;

      .item {
        width: 244px;

        .goods-img {
          width: 244px;
          height: 244px;
          line-height: 244px;
        }
      }
    }
  }
}

.order-list {
  .order-table {
    .box {
      .multi-good-info {
        display: block !important;
        max-width: 600px;
        white-space: nowrap;
        overflow-x: auto;

        .img {
          margin-right: 10px;
          display: inline-block;
        }
      }

      .multi-good-info.hide-scrollbar {
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      .goods-info {
        .img {
          position: relative;
          width: 60px;
          height: 60px;
        }

        .nums-con {
          position: absolute;
          left: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, .3);
          color: #fff;
          text-align: center;
          width: 100%;
          height: 20px;
          line-height: 20px;
          z-index: 999;
          font-size: 12px;
        }
      }
    }
  }
}

/* 个人中心首页 end */
